<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<title>[小程序]行情涨跌幅参考表</title>
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./js/util.js"></script>
	<script type="text/javascript" src="./js/jsrender.min.js"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<style type="text/css">
		body {
			font-family: 微软雅黑; margin: 0 0 0 0; color: #fefefe;
			background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
		}
		/*div {border: 1px solid blue;}*/

		.full_width {flex: none;}
		.vertical_middle {display: flex; align-items: center;}
		.horizal_right {display: flex; justify-content: flex-end;}
		.box {display: flex; flex-direction: row; justify-content: space-between;}
		.left_box {padding-left: .3em; width: 10.5em; height: 2em; font-size: 1.3em; font-weight: lighter;}
		.right_box {padding-right: .3em; width: 10.5em;height: 2em; font-size: 1.3em; font-weight: lighter;}

		.title_bar {
			height: 2em; 
			font-size: 1em; font-weight: lighter;
			padding-left: .6em;
		}

		/*开盘价格表*/
		.open_table {
			background-color: #fefefe;
			display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;
			padding: .6em .3em .3em .6em;
		}
		.open_table .open_grid {
			width: 6em; height: 1.3em;
			border-radius: .25em;
			background-color: #5D9CEC;
			display: flex; align-items: center;
			flex: auto;
			padding: .3em; margin: 0 .3em .3em 0;
		}
		.open_table .open_grid .coin_name{
			font-weight: normal;
			width: 2em;
		}
		.open_table .open_grid .open_price{
			font-weight: lighter; padding-left: .3em;
		}
		/*涨跌价格*/
		.price_table {
			background-color: #fefefe;
			display: flex; flex-direction: column; justify-content: space-around;
		}
		.price_item {
			display: flex; flex-direction: row;
			margin: 0 0 0 .6em; color: #339900;
			border-bottom: 1px solid #ededed;
		}
		.coin {width: 2em; display: flex; align-items: center;}
		.price {
			margin-left: .6em;
			padding: .4em 0em .4em 0em;
			flex-grow: 1;
			display: flex; flex-flow: row wrap; align-content: space-between;
		}
		.range {
			flex: 1;
			display: flex; flex-direction: row; align-content: space-between;
			padding-left: .3em;
		}
		.price_range {
			width: 8em;
			flex: auto;
		}
		.price_range .range{
			display: inline-block;
			width: 3em;
		}
		.price_range .range_price {font-weight: lighter;}

		.grayback {background-color: #f8f8f8;}
	</style>
</head>
<body>
	<div class="box">
		<div class="left_box vertical_middle">现货USDT价格</div>
		<div class="right_box vertical_middle horizal_right" id="today_date">08月10日</div>
	</div>
	<div class="title_bar full_width vertical_middle">
		<span>今日开盘价格(数据来自火币Global)</span>
	</div>
	<div class="open_table">
		<div class="open_grid">
			<span class="coin_name">BTC</span><span class="open_price">12788.18</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">ETH</span><span class="open_price">128.18</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">EOS</span><span class="open_price">3.9273</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">BCH</span><span class="open_price">308.63</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">ETC</span><span class="open_price">5.5838</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">LTC</span><span class="open_price">83.35</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">XRP</span><span class="open_price">0.2954</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">BSV</span><span class="open_price">140.147</span>
		</div>
		<div class="open_grid">
			<span class="coin_name">ADA</span><span class="open_price">0.050459</span>
		</div>
	</div>
	<div class="title_bar full_width vertical_middle">
		<span>涨跌幅价格</span>
	</div>
	<div class="price_table">
		<div class="price_item">
			<div class="coin">BTC</div>
			<div class="price">
				<div class="range grayback">
					<div class="price_range">
						<span class="range">+3%</span>
						<span class="range_price">11288.38</span>
					</div>
					<div class="price_range">
						<span class="range">-3%</span>
						<span class="range_price">11288.38</span>
					</div>
				</div>
				<div class="range">
					<div class="price_range">
						<span class="range">+5%</span>
						<span class="range_price">11288.38</span>
					</div>
					<div class="price_range">
						<span class="range">-5%</span>
						<span class="range_price">11288.38</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		/**数据模型 
    list = [
      {name:BTC, prices:[
        [
          {level:'+3',price:+3val},
          {level:'-3',price:-3val}
        ],
        [
          {level:'+5',price:+5val},
          {level:'-5',price:-5val},
        ]...
      ]},
      {name:ETH, prices:[
        [
          {level:'+3',price:+3val},
          {level:'-3',price:-3val}
        ],
        [
          {level:'+5',price:+5val},
          {level:'-5',price:-5val},
        ]...
      ]},
      ...
    ]
     * */
		const coinNameArr = ['btc', 'eth', 'eos', 'bch', 'etc', 'ltc', 'xrp', 'bsv', 'ada']
		const rangeIdArr = [['+3', '-3'], ['+5', '-5'], ['+10', '-10'], ['+15', '-15'], ['+20', '-20'], ['+25', '-25']]
		const multinumber = { '+3': 1.03, '-3': 0.97, '+5': 1.05, '-5': 0.95, '+10': 1.1, '-10': 0.9, '+15': 1.15, '-15': 0.85, '+20': 1.2, '-20': 0.8, '+25': 1.25, '-25': 0.75 }
		const precis = { btc: 7, eth: 5, ltc: 3, eos: 5, bch: 4, etc: 5, xrp: 4, bsv: 7, ada: 4 }

		var openPrices = [];
		var openPrices = [];
		
	</script>
</body>
</html>